<template>
  <div>
    <div id="_div1">

      <!--    类型分类-->
      <div style="margin-top: 20px">
        <label>类型</label>&nbsp;
        <el-radio-group v-model="radioType" size="medium" @input="chooseType">
          <el-radio-button :value="''">全部</el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="radioType" size="medium" @input="chooseType">
          <el-radio-button v-for="type in types" :label="type.typeName" :key="type.typeId"
          >{{ type.typeName }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <!--    难易程度-->
      <div style="margin-top: 20px">
        <label>难度</label>&nbsp;

        <el-radio-group v-model="radioDifficulty" size="medium" @input="chooseDifficulty">
          <el-radio-button v-for="difficulty in difficultyList" :label="difficulty" :key="difficulty">{{ difficulty }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <!--排序    根据热度，更新时间-->
      <div style="margin-top: 20px">
        <label>排序</label>&nbsp;
        <el-radio-group v-model="order" size="medium" @input="chooseOrder">
          <el-radio-button v-for="item in orders" :label="item.tag" :key="item.name"
          >{{ item.name }}
          </el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <br>
    <div id="_div3">
      <keep-alive>
        <div>
          <show-test-list-plus ref="testView" :get-parent-type="parentType"
                               :getKeyword="inputKeyword"></show-test-list-plus>
        </div>
      </keep-alive>
    </div>
  </div>

</template>

<script>

import ShowTestListPlus from "@/components/ShowTestListPlus.vue";

export default {
  props: {
    inputKeyword: String,
    required: true,
  },
  name: "bread",
  components: {ShowTestListPlus},
  data() {
    return {
      parentType: -1,
      order: '',
      radioType: '',
      radioDifficulty: '',
      difficultyList: ['全部', '简单', '中等', '困难'],
      types: [{
        typeId: '',
        typeName: '',
      }],
      orders: [{tag: 'heatRange', name: '最热'}, {tag: 'testCreateTime', name: '最新'}],
    }
  },
  watch: {
    parentType(val) {
      console.log(val)
      // this.$refs.testView.condition.parentType=this.parentType;
      // this.$refs.testView.searchTest();
    }
  },

  methods: {
    initTestType() {
      this.parentType = sessionStorage.getItem("parentType")
      console.log(this.parentType)
      this.$axios.postForm("/testType/getByParentType", {parentType: this.parentType}).then(response => {
        console.log(response)
        if (response.data.code == 200) {
          this.types = response.data.data;
        }
      })
    },
    chooseType() {
      this.$refs.testView.condition.searchByType = this.radioType;
      this.$refs.testView.searchTest();
    },
    chooseDifficulty() {
      this.$refs.testView.condition.difficulty = this.radioDifficulty;
      this.$refs.testView.searchTest();
    },
    chooseOrder() {
      this.$refs.testView.condition.order = this.order;
      this.$refs.testView.searchTest();
    }
  },
  updated() {

  },
  // beforeRouteUpdate() {
  //   sessionStorage.removeItem("parentType")
  // },
  created() {
    this.initTestType()
  },
}
</script>
<style>
#_div1 {
  position: relative;
  left: 140px;
}
#_div3 {
  position: relative;
  left: 85px;
}
</style>